<template>
  <div class="category">
  <!--搜索-->
    <div class="searchHead">
        <img src="../../assets/images/back.png" alt="" @click="back()">
        <router-link to="/search">
          <input type="text" name="" value="" placeholder="输入商品关键词">
        </router-link>
    </div>


    <!--导航-->
    <div class="list">
    	<div v-for="item in cateData" class="banner_list">
    		<h2 v-text="item.title"></h2>
    		<ul>
    			<li v-for="it in item.bannerList">
    				<img :src="it.imgUrl">
    				<p v-text="it.title"></p>
    			</li>
    		</ul>
    	</div>
    </div>


    <!--产品-->
    <div class="list_pro">
	    <!--精品推荐-->
	    <div class="title_wrap">
	      <div class="title_child">
	        <div>
	          <i></i>
	          <i></i>
	          <b>精品推荐</b>
	          <span>New Arrivals</span>
	        </div>
	      </div>
	    </div>
	    <!--导航-->
	    <div class="tab_top">
		    <ul>
		      <li>
		        <p>人气</p>
		      </li>
		      <li>
		        <p>销量</p>
		      </li>
		      <li>
		        <p>最新</p>
		      </li>
		      <li>
		        <p>价格<img src="../../assets/images/price.png"></p>
		      </li>
		    </ul>
	    </div>

	    <!--产品列表-->
	    <div class="pro">
		    <ul>
		      <li v-for="a in listData">
		        <router-link :to="'/details/'+a.chuchuId">
		            <img :src="a.imgUrl">
		            <h2 v-text="a.title"></h2>
		            <h3><span>￥</span>{{a.newPrice}}</h3>
		            <p>
		              <i>￥{{a.oldPrice}}</i>
		              <span>{{a.saleCount}}人已购买</span>
		            </p>
		            <div></div>
		          </router-link>
		      </li>
		    </ul>
	  	</div>
  	</div>
  </div>
</template>

<script>

  export default{
  	data () {
  		return {
  			id: this.$route.params.id,
  			cateData: [],
  			listData: []
  		}
  	},
  	 methods: {
        back () {
            history.back();
        }
    },
  	created () {
  		let id = this.id;
  		this.$http.get('../../static/list/'+ id +'.json').then( data => {
  			this.cateData = data.data.data.bannerGroupList;
  			this.listData = data.data.data.productList;
  		}, err => {
  			console.log(err);
  		})
  	}
  }

</script>

<style scoped>
.category{
	background-color: #F7F7F7;
}
.searchHead{
    width: 100%;
    height: 2.92rem;
    background: #fff;
    padding: .42rem 0;
    border-bottom: 1px solid #F7F7F7;
}
.searchHead img{
    float: left;
    width: 22px;
    height: 20px;
    margin: .67rem 0 0 .83rem;
}
.searchHead input{
    float: left;
    width: 14.42rem;
    height: 2.08rem;
    margin-left: 1.7rem;
    padding: 4px 10px 4px 35px;
    border: solid 1px #DDD;
    border-radius: 30px;
    font-size: 1rem;
    font-size: 14px;
    color: #CCC;
    text-align: start;
    outline: none;
    background: url(../../assets/images/search-in.png) 10px center/ 16px 16px no-repeat;
}

 /*导航*/
 .banner_list{
 	width: 100%;
 	margin-bottom: 0.83rem;
 	background-color: #fff;
 }
 .banner_list h2{
 	padding: 0.83rem;
    font-size: 1.35rem;
    color: #666;
 }
.banner_list ul{
	padding: 0 0.42rem;
}
.banner_list ul:after{
	clear: both;
    content: '';
    font-size: 0;
    display: block;
    visibility: hidden;
    height: 0;
}
.banner_list ul li{
	width: 25%;
    padding:0 0.42rem 0.83rem 0.42rem;
    float: left;
    box-sizing: border-box;
}
.banner_list ul li img{
	width: 100%;
}
.banner_list ul li p{
	font-size: 1.1rem;
  text-align: center;
  color: #83797c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*精品推荐*/
.title_wrap{
  padding: 2.5rem 0.83rem;
  color: #999;
  background-color: #fff;
}
.title_wrap .title_child{
  height: 1px;
  background: #eaeaea;
  position: relative;
}
.title_wrap .title_child div{
  position: absolute;
  top: -0.83rem;
  left: 50%;
  margin-left: -5.83rem;
  width: 11.67rem;
  text-align: center;
  background: #FFF;
}
.title_wrap .title_child div i:first-of-type{
  margin-left: 0.25rem;
  float: left;
  width: 1.59rem;
  height: 0.42rem;
  margin-top: 0.67rem;
  display: inline-block;
  background: url('../../assets/images/icon.png');
  background-size: 100% 100%;
}
.title_wrap .title_child div i:last-of-type{
  margin-right: 0.25rem;
  float: right;
  width: 1.59rem;
  height: 0.42rem;
  margin-top: 0.67rem;
  display: inline-block;
  background: url('../../assets/images/icon.png');
  background-size: 100% 100%;
}
.title_wrap .title_child div b{
  color: #df3130;
  font-size: 1.34rem;
  display: block;
  line-height: 1.5rem;
}
.title_wrap .title_child div span{
  color: #ebebeb;
  font-size: 1.2rem;
  display: block;
  line-height: 1.5rem;
}
/*导航*/
.tab_top{
  position: relative;
  top: 0px;
  z-index: 7;
  width: 100%;
  height: 2.75rem;
  font-size: 1.2rem;
  background: #FFF;
}
.tab_top ul{
  width: 100%;
  height: 2.5rem;
  position: absolute;
  top: 0.25rem;
  left: 0;
  z-index: 6;
}
.tab_top ul li{
   width: 25%;
  text-align: center;
  color: #83797b;
  cursor: pointer;
  float: left;
}
.tab_top ul li p{
  display: inline-block;
  height: 2.5rem;
  line-height: 2.5rem;
}
.tab_top ul li p img{
  width: 0.5rem;
  height: 0.83rem;
  margin-left: 2px;
  vertical-align: middle;
  transform: rotateX(0deg);
}
.tab_top ul li:hover p{
  height: 2.33rem;
  line-height: 2.33rem;
  color: #df3130;
  border-bottom: solid 2px #df3130;
}
/*产品列表*/
.pro{
  width: 100%;
  margin-bottom: 4.17rem;
}
.pro ul{
  width: 100%;
  height: 211rem;
}
.pro ul:after{
  clear: both;
  content: '';
  font-size: 0;
  display: block;
  visibility: hidden;
  height: 0;
}
.pro ul li{
  width: 50%;
  position: relative;
  border-bottom: solid 1px #EEE;
  padding: 10px 10px 4px;
  float: left;
  box-sizing: border-box;
  background-color: #fff;
}
.pro ul li div{
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #EEE;
}
.pro ul li img{
  width: 100%;
}
.pro ul li h2{
  padding:0 0.42rem;
  font-size: 1.2rem;
  color: #444;
  height: 3.33rem;
  line-height: 1.67rem;
  overflow: hidden;
  word-break: break-all;
}
.pro ul li h3{
  font-size: 1.6rem;
  color: #df3130;
  padding:0.5rem 0.42rem 0;
  font-weight: 400;
}
.pro ul li h3 span{
  font-size: 1.1rem;
  margin-top: 0.5rem;
  color: #df3130
}
.pro ul li p{
  padding:0 0.42rem 0.42rem;
  color: #aaa;
  font-size: 1.1rem;
}
.pro ul li p i{
  font-size: 1.05rem;
  text-decoration: line-through;
}
.pro ul li p span{
  float: right;
}
</style>
